<template>
  <div class="app-container">
    <div class="top">
      <div class="operate">
        <el-button
          size="small"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['exceptionMgmt:warning:export']"
          >导出
        </el-button>
      </div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item>
          <el-checkbox
            v-model="queryParams.relatedVsMe"
            label="与我相关"
            border
            size="small"
            class="related-me"
            @change='handleQuery'
          ></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="queryParams.qulityControl"
            label="品控关注"
            border
            size="small"
            class="related-me"
            true-label="Y"
            :false-label="null"
            @change='handleQuery'
          ></el-checkbox>
        </el-form-item>
        <el-form-item prop="searchValue" class='el-width-110'>
          <el-input
            v-model="queryParams.searchValue"
            placeholder="请输入关键字"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item prop="warmDate" class='el-width-350'>
          <el-date-picker
            clearable
            v-model="warmDate"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            @change="handleChangeDate">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <organizationCascader
            :clearData="clearData"
            :arrData="queryParams"
            :widthData ="widthData"
            :isAllList="true"
            @change="queryParamsChange"
          ></organizationCascader>
        </el-form-item>
        <el-form-item prop="warmTypeCode" class='width-150'>
          <el-select
            placeholder="请选择预警分类"
            clearable
            v-model="queryParams.warmTypeCode"
            size="small"
          >
            <el-option
              v-for="item in dict.AbnormalType"
              :key="item.codevalue"
              :label="item.codename"
              :value="item.codevalue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="calc(100% - 88px - 60px)"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="预警单号" prop='warmNo'></el-table-column>
      <el-table-column label="预警分类" prop='abnormalTypeName'></el-table-column>
      <el-table-column label="预警名称" prop="warmName"></el-table-column>
      <el-table-column label="关联指标" prop="indexName"></el-table-column>
      <el-table-column label="关联任务">
        <template slot-scope="{ row }">
          <el-button type="text" class="status-task" @click.stop="taskDetail(row)">{{row.jobName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="品控关注">
        <template slot-scope="{ row }">
          <span v-if='row.qulityControl == "Y"'>是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column label="工厂" prop='factoryDeptName'></el-table-column>
      <el-table-column label="车间" prop='workshopName'></el-table-column>
      <el-table-column label="产线" prop='lineName'></el-table-column>
      <el-table-column label="关联设备" prop='equipmentName'></el-table-column>
      <el-table-column label="责任人" prop='processedName'></el-table-column>
      <el-table-column label="生成时间" prop='warmDate' min-width="150"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="{ row }">
          <span class="status-stop" v-if='row.status == 0'>预警</span>
          <span class="status-invalid" v-if='row.status == 1'>已失效</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />

    <!-- 任务详情 -->
    <detail-Dialog
      :visible.sync="taskDialog.visible"
      :row="taskDialog.row"
    ></detail-dialog>
  </div>
</template>
<script>
  import detailDialog from "@/views/taskMgmt/center/detailDialog";
  import { warmList,warmDetail, exportWarning } from "@/api/exceptionMgmt/warn";
import organizationCascader from "@/views/components/organizationCascader";
import { mapState,mapMutations  } from "vuex";
import { downloadFile } from "@/utils/file";
export default {
  components: {organizationCascader,detailDialog },
  name:"Warning",
  dicts: ["AbnormalType"],
  data() {
    return {
      queryParams: {
        factoryDeptCode: null,
        workshopCode: null,
        erpProductionLineCode: null,
        lineId:null,
        warmTypeCode:null,
        start:"",
        end:"",
        searchValue:"",
        relatedVsMe:true,
        qulityControl:null
      },
      warmDate:[],
      single: null,
      list: [],
      optionList:[
        {label:"一级异常（非常紧急）",value:1},
        {label:"二级异常（非常紧急）",value:2},
        {label:"三级异常（非常紧急）",value:3}
      ],
      loading: false,
      clearData:{
        factory:true,
        workshop:true,
        line:true
      },
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      taskDialog: {
        visible: false,
        row: null,
      },
      widthData:{
        factory:"130px",
        workshop:"130px",
        line:"130px"
      },
      exportLoading: false
    };
  },
  computed:{
    ...mapState({
      warnDetail:(state) => state.workbench.warnDetail
    })
  },
  activated(){
    if(this.warnDetail){
      this.queryParams = Object.assign({},this.queryParams,this.warnDetail)
      this.warmDate = [this.queryParams.start,this.queryParams.end]
      this.getList();
    }
  },

  deactivated() {
    this.SET_WARN_DETAIL(null)
  },
  created() {
    const result = this.getOwnFirstLine()
    this.queryParams.factoryDeptCode = result[0]?.factoryDeptCode;
    this.queryParams.workshopCode = result[1]?.workshopCode;
    this.queryParams.erpProductionLineCode = result[2]?.lineCode;
    this.queryParams.lineId = result[2]?.lineId;
    if(this.warnDetail){
      this.queryParams = Object.assign({},this.queryParams,this.warnDetail)
      this.warmDate = [this.queryParams.start,this.queryParams.end]
    }
    this.getList();
  },
  methods: {
    ...mapMutations("workbench", ["SET_WARN_DETAIL"]),
    getList() {
      this.loading = true;
      this.single = null;
      const { pageNum, pageSize } = this.pager;
      const param = {
        query:{...this.queryParams},
        pageNum,
        pageSize,
      };
      warmList(param)
        .then((res) => {
          this.list = res?.rows || {};
          this.pager.total = res?.total || 0;
          this.loading = false;
        })
        .catch(() => {
          this.list = [];
          this.pager.total = 0;
          this.loading = false;
        });
    },

    taskDetail(row) {
      this.taskDialog.row = {id:row.jobId};
      this.taskDialog.visible = true;
    },

    handleChangeDate(item){
      if (item) {
        this.queryParams.start = item[0];
        this.queryParams.end = item[1];
      } else {
        this.queryParams.start = "";
        this.queryParams.end = "";
      }
    },

    queryParamsChange({ factoryDeptCode, workshopCode, lineCode,lineId }) {
      this.queryParams = {
        factoryDeptCode,
        workshopCode,
        erpProductionLineCode:lineCode,
        lineId,
        warmTypeCode:this.queryParams.warmTypeCode,
        start:this.queryParams.start,
        end:this.queryParams.end,
        relatedVsMe:this.queryParams.relatedVsMe,
        qulityControl:this.queryParams.qulityControl,
        searchValue:this.queryParams.searchValue
      };
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        factoryDeptCode: null,
        workshopCode: null,
        erpProductionLineCode: null,
        lineId:null,
        warmTypeCode:null,
        start:"",
        end:"",
        relatedVsMe:true,
        qulityControl:null,
        searchValue:""
      };
      this.SET_WARN_DETAIL(null)
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.exportLoading = true;
      const param = {
        ...this.queryParams,
      };
      exportWarning(param)
        .then((res) => {
          downloadFile(
            res.file,
            decodeURIComponent(res.name) ||
              `预警信息汇总${this.parseTime(new Date(), "{y}{m}{d}{h}{i}{s}")}.xlsx`
          );
        })
        .finally(() => {
          this.exportLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  ::v-deep .el-form-item__content{
    line-height: 0;
  }
  .el-form{
    // text-align: right;
    .el-range-editor{
      width:100%;
    }
  }
}
.pagination-container {
  margin: 0;
}
.status-task{
  color: #F59A23;
  font-weight: 600;
}
.status-stop{
  color: #D9001B;
  font-weight: 600;
}
.status-invalid{
  color: #999;
  font-weight: 600;
}
</style>
